<template>
  <div v-if="platePicList && platePicList.length > 0 && platePicList[0].imgUrl">
    <div class="pic" v-if="platePicList.length === 2">
      <img v-for="i in platePicList" :key="i.id" :src="i.imgUrl" />
    </div>
    <div class="pics" v-else>
      <div class="aa">
        <div class="a">
          <img :src="platePicList[0].imgUrl" />
          <img :src="platePicList[1].imgUrl" />
        </div>
        <div class="b">
          <img :src="platePicList[2].imgUrl" />
          <img :src="platePicList[3].imgUrl" />
        </div>
      </div>
      <div class="c">
        <img :src="platePicList[4].imgUrl" />
        <img :src="platePicList[5].imgUrl" />
        <img :src="platePicList[6].imgUrl" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['platePicList']
}
</script>

<style lang="scss" scoped>
.pic {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
  // border: 1px solid #00ff95;
}
.pics {
  // border: 1px solid #ff0000;
}
.aa {
  display: flex;
  justify-content: space-between;
}
.a {
  width: 1325px;
  // border: 1px solid #0026ff;
  display: flex;
  justify-content: space-between;
}
.a img {
  width: 650px;
  // border: 1px solid #000;
}
.b {
  width: 650px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.b img {
  // border: 1px solid #000;
}
.c {
  margin: 20px 0;
  display: flex;
  justify-content: space-between;
}
.c img {
  width: 650px;
}
</style>
